﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<body>

	<div id="app">
		<el-button plain v-on:click="Add()">新增</el-button>
		<el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#FFDB6F',color:'#606266'}">
			<el-table-column prop="first_kind_name" label="I级机构名称" min-width="120%"></el-table-column>
			<el-table-column prop="second_kind_id" label="II级机构编号" min-width="120%"></el-table-column>
			<el-table-column prop="second_kind_name" label="II级机构名称" min-width="120%"></el-table-column>
			<el-table-column prop="second_salary_id" label="薪酬发放责任人编号" min-width="120%"></el-table-column>
			<el-table-column prop="second_sale_id" label="销售责任人编号" min-width="120%"></el-table-column>
			<el-table-column label="变更">
				<template #default="scope">
					<el-button size="small" v-on:click="handleEdit(scope.row)">
						变更
					</el-button>
				</template>
			</el-table-column>
			<el-table-column label="删除">
				<template #default="scope">
					<el-button size="small" v-on:click="handleDelete(scope.row.fsk_id)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog v-model="dialogVisible"
				   title="II级机构变更"
				   width="800">
			<span>
				<el-form ref="uruleFormRef" :model="uform" :rules="urules" label-width="auto" style="max-width: 750px">
					<el-form-item label="I级机构名称" prop="first_kind_name">
						<el-input v-model="uform.first_kind_name" />
					</el-form-item>
					<el-form-item label="II级机构编号" prop="second_kind_id">
						<el-input v-model="uform.second_kind_id" />
					</el-form-item>
					<el-form-item label="II级机构名称" prop="second_kind_name">
						<el-input v-model="uform.second_kind_name" />
					</el-form-item>
					<el-form-item label="薪酬发放责任人编号" prop="second_salary_id">
						<el-input type="textarea" rows="5" v-model="uform.second_salary_id" />
					</el-form-item>
					<el-form-item label="销售责任人编号" prop="second_sale_id">
						<el-input type="textarea" rows="5" v-model="uform.second_sale_id" />
					</el-form-item>
					<el-form-item>
						<el-button v-on:click="udialogVisible = false">取消</el-button>
						<el-button type="primary" v-on:click="upOk()">
							变更
						</el-button>
					</el-form-item>
				</el-form>

			</span>

		</el-dialog>
		<el-dialog v-model="dialogVisibleAdd"
				   title="II级机构添加"
				   width="800">
			<span>
				<el-form ref="uruleFormRefAdd" :model="uformAdd" label-width="auto" style="max-width: 750px">
					<el-form-item label="I级机构名称" prop="first_kind_name">
						<el-select v-model="uformAdd.first_kind_name"
								   placeholder="请选择"
								   size="large"
								   style="width: 240px">
							<el-option v-for="item in options"
									   :key="item.ffkId"
									   :label="item.first_kind_name"
									   :value="item.first_kind_id+item.first_kind_name" />
						</el-select>
					</el-form-item>
					<el-form-item label="II级机构编号" prop="second_kind_id">
						<el-input v-model="uformAdd.second_kind_id" />
					</el-form-item>
					<el-form-item label="II级机构名称" prop="second_kind_name">
						<el-input v-model="uformAdd.second_kind_name" />
					</el-form-item>
					<el-form-item label="薪酬发放责任人编号" prop="second_salary_id">
						<el-input type="textarea" rows="5" v-model="uformAdd.second_salary_id" />
					</el-form-item>
					<el-form-item label="销售责任人编号" prop="second_sale_id">
						<el-input type="textarea" rows="5" v-model="uformAdd.second_sale_id" />
					</el-form-item>
					<el-form-item>
						<el-button v-on:click="udialogVisibleAdd = false">取消</el-button>
						<el-button type="primary" v-on:click="Addok()">
							添加
						</el-button>
					</el-form-item>
				</el-form>

			</span>

		</el-dialog>
	</div>

</body>
<script type="text/javascript">
	const { createApp, ref, reactive, computed, watchEffect } = Vue;
	var app = createApp({
		setup() {
			var tableData = ref([])
			let dialogVisible = ref(false);
			const uruleFormRef = ref(null);
			let dialogVisibleAdd = ref(false);
			const uruleFormRefAdd = ref(null);
			//修改的数据
			const uform = reactive({
				fsk_id: '',
				first_kind_name: '',
				second_kind_id: '',
				second_kind_name: '',
				second_salary_id: '',
				second_sale_id: ''
			})
			//添加的数据
			const uformAdd = reactive({
				first_kind_name: '',
				second_kind_id: '',
				second_kind_name: '',
				second_salary_id: '',
				second_sale_id: ''

			})
			//点击下拉框
			const options = ref();
			axios.post('/GetCFFK')
				.then(res => {
					options.value = res.data
				})
			//查询
			function Fill() {
				axios.post('/GetCFSK')
					.then(res => {
						console.info(res.data);
						tableData.value = res.data;
					})
			}
			Fill();
			//点击修改，弹出模态框，赋值
			function handleEdit(row) {
				console.info(row)
				dialogVisible.value = true;
				uform.fsk_id = row.fsk_id;
				uform.first_kind_name = row.first_kind_name;
				uform.second_kind_id = row.second_kind_id;
				uform.second_kind_name = row.second_kind_name;
				uform.second_salary_id = row.second_salary_id;
				uform.second_sale_id = row.second_sale_id;
			}
			//点击确认修改
			function upOk() {
				// console.info(uform.fsk_id)
				// console.info(uform.second_kind_id)
				uruleFormRef.value.validate((valid, fields) => {
					if (valid) {
						axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
						axios.post('/CFSK/UpdateCFSK', {
							fsk_id: uform.fsk_id,
							first_kind_name: uform.first_kind_name,
							second_kind_id: uform.second_kind_id,
							second_kind_name: uform.second_kind_name,
							second_salary_id: uform.second_salary_id,
							second_sale_id: uform.second_sale_id
						}).then(res => {
							if (res.data) {
								console.info(res.data)
								alert("修改成功")
								Fill();
								dialogVisible.value = false;
							}
						}).catch(err => {
							console.log(err);
						})
					} else {
						console.log('error submit!', fields)
					}
				})

			}
			//点击删除
			function handleDelete(fsk_id) {
				console.info(fsk_id)
				if (confirm("确定删除")) {
					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/CFSK/DeleteCFSK', {
						id: fsk_id
					}).then(res => {
						if (res.data) {
							Fill();
							alert("删除成功")
						}
					}).catch(err => {
						console.log(err);
					})
				}

			}
			//点击增加，出现模态框
			function Add() {
				dialogVisibleAdd.value = true;
				qk();
			}
			//点击确定增加
			function Addok() {
				str = uformAdd.first_kind_name
				ffid = str.substring(0, 2);
				ffname = str.substring(2);
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.put('/CFSK/AddCFSK', {
					first_kind_id: ffid,
					first_kind_name: ffname,
					second_kind_id: uformAdd.second_kind_id,
					second_kind_name: uformAdd.second_kind_name,
					second_salary_id: uformAdd.second_salary_id,
					second_sale_id: uformAdd.second_sale_id,
				}).then(res => {
					if (res.data) {
						console.info(res.data)
						alert("添加成功")
						Fill();
						dialogVisibleAdd.value = false;
					}
				}).catch(err => {
					console.log(err);
				})

			}
			//清空模态框
			function qk() {
				first_kind_name: ''
				second_kind_id: '';
				second_kind_name: '';
				second_salary_id: '';
				second_sale_id: '';
			}
			return {
				tableData,
				dialogVisible,
				uruleFormRef,
				uform,
				handleEdit,
				upOk,
				handleDelete,
				dialogVisibleAdd,
				uruleFormRefAdd,
				uformAdd,
				Add,
				options,
				Addok,


			}
		}
	})
	app.use(ElementPlus);
	app.mount("#app");
</script>
<style type="text/css">
	body {
		background-color: #FFFFBB;
		border: 1px solid #FFDB6F;
	}
</style>
